<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会动的加菲猫哈</title>
    <link rel="stylesheet" href="./css/index.css" />
    <style id="styleTag"></style>
    <style>
      .control {
        position: fixed;
        right: 0;
        top: 10px;
        margin-right: 10px;
      }
      .control div {
        float: left;
        margin: 0 5px;
        border: 2px solid orange;
        background-color: yellow;
        padding: 5px;
      }
      .control div:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="control">
      <div id="speedUp">加速</div>
      <div id="speedDown">减速</div>
      <div id="reset">Reset</div>
    </div>
    <div class="code-wrapper"><pre id="code"></pre></div>
    <div class="preview-wrapper">
      <div class="garfield">
        <div class="face">
          <div id="triangle-right">
            <div class="triangle1"></div>
            <div class="triangle2"></div>
            <div class="triangle3"></div>
          </div>

          <div id="triangle-left">
            <div class="triangle1"></div>
            <div class="triangle2"></div>
            <div class="triangle3"></div>
          </div>

          <div class="whisker1">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>

            <div class="stripes4">
              <div class="stripeD"></div>
              <div class="stripe4"></div>
            </div>
          </div>

          <div class="whisker2">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>

            <div class="stripes4">
              <div class="stripeD"></div>
              <div class="stripe4"></div>
            </div>
          </div>

          <div class="whisker3">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>

            <div class="stripes4">
              <div class="stripeD"></div>
              <div class="stripe4"></div>
            </div>
          </div>

          <div class="whisker4">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>
          </div>

          <div class="whisker5">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>

            <div class="stripes4">
              <div class="stripeD"></div>
              <div class="stripe4"></div>
            </div>
          </div>

          <div class="whisker6">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>

            <div class="stripes4">
              <div class="stripeD"></div>
              <div class="stripe4"></div>
            </div>
          </div>

          <div class="whisker7">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>

            <div class="stripes4">
              <div class="stripeD"></div>
              <div class="stripe4"></div>
            </div>
          </div>

          <div class="whisker8">
            <div class="stripes1">
              <div class="stripeA"></div>
              <div class="stripe1"></div>
            </div>

            <div class="stripes2">
              <div class="stripeB"></div>
              <div class="stripe2"></div>
            </div>

            <div class="stripes3">
              <div class="stripeC"></div>
              <div class="stripe3"></div>
            </div>
          </div>

          <div id="eyes">
            <div class="eye left"><div class="eyeball1"></div></div>
            <div class="eye right"><div class="eyeball2"></div></div>
          </div>
          <div class="nose"></div>
          <div class="mouth"></div>
          <div class="snout1"></div>
          <div class="snout1small"><div class="whisker left"></div></div>
          <div class="snout2"></div>
          <div class="snout2small"><div class="whisker right"></div></div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/index.js"></script>
</html>
